<template>
	<view class="containerBox">
		<view class="loginStyle">
			<view style="margin-top: 50px;">
				<image style="width: 80px;border-radius: 8px;" mode="widthFix" src="../../static/logo.png"></image>
				<view style="margin: 30px 0;">洗丫丫洗衣服务</view>
				<view v-if="type === 1" class="loginForm">
					<view class="inputBox">
						<input type="text" v-model="phone" placeholder="请输入手机号">
					</view>
					<view class="inputBox" style="display: flex;justify-content: space-between;align-items: center;">
						<input style="width: 180px;" v-model="checkCode" type="text" placeholder="请输入验证码">
						<view style="color: #2c6cf4;font-size: 14px;" @click="getCode">{{remainingTime? remainingTime+'s后获取':'获取验证码'}}</view>
					</view>
					<button style="width: 300px;margin-top: 50px;" type="primary" @click="loginTodo">立即登录</button>
				</view>
				<view v-if="type === 2">
					<button type="primary">一键快捷登录</button>
					<view>输入手机号注册/登录</view>
				</view>
			</view>
			<view class="apply">
				<radio style="transform:scale(0.7)" :checked="agreed" />我已阅读并同意 <view class="agreement" @click="toAgreement">《洗丫丫洗护协议》</view> 和 <view class="agreement" @click="toPri">《用户隐私协议》</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { sendCheckCode, login } from '@/api/home.js'
	export default {
		data() {
			return {
				remainingTime: 0,
				timer: null,
				type: 1,
				agreed:true,
				phone: '',
				checkCode:'',
				isSendPhone: false,
				lng:'',
				lat:''
			}
		},
		onShow() {
			let that = this
			uni.setStorageSync('consumerId',31)
			// const token = uni.getStorageSync('token');
			// if(token) return uni.switchTab({
			// 	url: '/pages/index/index'
			// })
			uni.getLocation({
			    type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标
			    success: function (res) {
					that.lng = res.longitude
					that.lat = res.latitude
					console.log(that.lng,that.lat)
			    },
			    fail: function (error) {
			        console.error('获取位置失败：', error);
			    }
			});
			
		},
		methods: {
			startCountdown() {
			  this.timer = setInterval(() => {
				if (this.remainingTime > 0) {
				  this.remainingTime--;
				} else {
				  this.clearCountdown();
				}
			  }, 1000);
			},
			clearCountdown() {
			  clearInterval(this.timer);
			  this.timer = null;
			  this.remainingTime = 0; // 重置倒计时时间
			},
			getCode() {
				if(this.remainingTime === 0){
					if(this.isSendPhone) return uni.showToast({title: '已发送验证码',icon:'none'})
					if(!this.phone) return uni.showToast({title: '请输入手机号',icon:'none'})
					sendCheckCode({phone:this.phone}).then(res=>{
						this.remainingTime = 60
						this.startCountdown()
						this.isSendPhone = true
						uni.showToast({title: '发送成功',icon:'none'})
					})
				}
			},
			toAgreement() {
				uni.navigateTo({
					url:'/pages/agreement/index'
				})
			},
			toPri() {
				uni.navigateTo({
					url:'/pages/privacy/index'
				})
			},
			loginTodo() {
				let that = this
				let data = {
					phone:this.phone,
					checkCode:this.checkCode,
					code: '',
					lng: that.lng,
					lat: that.lat,
				}
				const consumerId = uni.getStorageSync('consumerId')
				// return console.log(consumerId,'consumerId')
				if(consumerId) data.consumerId = consumerId
				uni.login({
				  success: (rs) => {
					data.code = rs.code
					login(data).then(res=>{
						if(res.code === 200) {
							uni.setStorageSync('token', res.data.token);
							uni.switchTab({
								url: '/pages/index/index'
							})
						}else{
							uni.showToast({
								title: res.message,
								icon:'none'
							})
						}
						
					})
				  },
				  fail: (err) => {
					reject(err)
				  }
				})
				
			}
		}
	}
</script>

<style scoped lang="less">
	.containerBox{
		padding: 10px 15px;
		box-sizing: border-box;
		height: 100vh;
		.loginStyle{
			background-color: #fff;
			border-radius: 4px;
			height: 100%;
			text-align: center;
			background-color: ;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.loginForm{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.inputBox{
				width: 300px;
				border-bottom: 1px solid #f5f5f5;
				input{
					width: 100%;
					height: 50px;
					text-align: left;
				}
			}
		}
		.apply{
			display: flex;
			align-items: center;
			font-size: 12px;
			.agreement{
				color: #2c6cf4
			}
		}
	}
	
</style>
